<template>
  <div>
    <el-dialog class="abow_dialog"
               :visible.sync="uploadDialog"
               center
               title="批量导入学生">
      <div style="color: darkorange;text-align: center;margin: auto; width: max-content; max-height: 100%">
        <template>
          <el-upload action='https://jsonplaceholder.typicode.com/posts/'
                     :file-list="modeList"
                     :http-request="modeUpload"
                     style="color:darkorange">
            <div><i class="el-icon-upload"></i> 添加文件</div><br>
            <div style="color: darkorange;">支持.xls .xlsx文件</div>
          </el-upload><br>
          <el-button class="botton"
                     type="primary"
                     @click="upload">确认上传</el-button>
        </template>
      </div>
    </el-dialog>
    <el-dialog class="abow_dialog"
               :visible.sync="centerDialogVisible"
               center
               :title="title">
      <div style="color: darkorange;text-align: center;margin: auto; width: max-content; max-height: 100%">
        姓名：<el-input v-model="in_userName"
                  class="input3"
                  placeholder="姓名"
                  style="width: 200px"></el-input>
        <br />
        专业：<el-input v-model="in_major"
                  class="input3"
                  placeholder="专业"
                  style="width: 200px"></el-input>
        <br />
        班级：<el-input v-model="in_clazz"
                  class="input3"
                  placeholder="班级"
                  style="width: 200px"></el-input>
        <div style="text-align: center;">
          <el-button class="botton"
                     @click="centerDialogVisible = false">取 消</el-button>
          <el-button class="botton"
                     @click="insertUser()">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <div style="color: darkorange; font-size: small; height: 30px">
      <el-input v-model="to_account"
                class="input"
                placeholder="学号"
                style="width: 100px"></el-input>&nbsp;
      <el-input v-model="to_name"
                class="input"
                placeholder="用户名"
                style="width: 100px"></el-input>&nbsp;
      <el-input v-model="to_major"
                class="input"
                placeholder="专业"
                style="width: 100px"></el-input>&nbsp;
      <template>
        <el-select v-model="to_clazz"
                   @change="load"
                   class="input3"
                   clearable
                   style="width: 200px;"
                   placeholder="上课班级">
          <el-option v-for="item in clazzOption"
                     :key="item.clazz"
                     :label="'班级:'+item.clazz+' 人数：'+item.count"
                     :value="item.clazz">
          </el-option>
        </el-select>
      </template>&nbsp;
      <el-button class="botton"
                 @click="load()">搜索</el-button>
      <el-button class="botton"
                 @click="insert()">新增<i class="el-icon-circle-plus"></i></el-button>
      <el-button class="botton"
                 @click="multipleDelete()">批量删除<i class="el-icon-remove-outline"></i></el-button>
      <el-button class="botton"
                 @click="uploadDialog=true">导入<i class="el-icon-upload"></i></el-button>
    </div>
    <div style="margin-top: 8px; margin-bottom: 15px"></div>
    <div class="big">
      <el-table :data="tableData"
                :row-style="{ color: 'darkorange', height: '60px' }"
                border
                fit
                style="width: 100%"
                @selection-change="HandleSelectChange">
        <el-table-column type="selection"> </el-table-column>
        <el-table-column sortable
                         label="账号"
                         prop="user.account">
        </el-table-column>
        <el-table-column label="名字"
                         prop="user.name"> </el-table-column>
        <el-table-column label="专业"
                         prop="major"> </el-table-column>
        <el-table-column label="班级"
                         sortable
                         prop="clazz"> </el-table-column>
        <el-table-column fixed="right"
                         label="修改信息/重置密码/删除"
                         width="190px">
          <template slot-scope="scope">
            <div class="edit_delete">
              <el-button circle
                         icon="el-icon-edit"
                         type="warning"
                         @click="editUser(scope.row)"></el-button>
              <el-button circle
                         icon="el-icon-key"
                         type="success"
                         @click="resetStudent(scope.row)"></el-button>
              <el-button circle
                         icon="el-icon-delete"
                         type="danger"
                         @click="deleteUser(scope.row.studentId)"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0; text-align: center">
      <el-pagination :current-page="page"
                     :total="total"
                     background
                     class="white-list-tool"
                     layout="total,prev, pager, next, jumper"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: mapState(["user", "term", "token"]),
  data () {
    return {
      clazzOption: '',

      uploadDialog: false,
      title: "",
      tableData: [],
      total: 0,
      page: 1,
      centerDialogVisible: false,
      insertOrUpdate: true,

      in_userId: '',
      in_userName: "",
      in_userPassword: "",
      in_userAccount: "",
      in_userJob: 3,
      in_clazz: '',
      in_major: '',
      in_studentId: '',

      to_name: "",
      to_job: "",
      to_account: "",
      to_major: '',
      to_clazz: '',

      multipleSelection: [],

      mode: {},
      modeList: [],

    };
  },
  methods: {
    resetStudent (row) {
      this.$http.put("/user", {
        userId: row.userId,
        account: row.user.account,
        name: row.user.name,
        password: "123456",
        job: row.user.job,
      }, { headers: { 'userId': this.token } }).then((res) => {
        if (!res.data.success) { this.$message(res.data.errorMsg) }
        else { this.$message("重置成功") }
      })
    },
    modeUpload: function (item) {
      this.mode = item.file
    },
    async upload () {
      let fd = new FormData()
      fd.append('file', this.mode)
      await this.$http.post('/stu/upload', fd, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'userId': this.token
        }
      }).then((res) => {
        if (res.data.success) { this.$message("导入成功") }
        else { this.$message(res.data.errorMsg) }
      })
      this.uploadDialog = false
      this.load()
      this.loadClazz()
    },
    clearInput () {
      this.in_userName = ""
      this.in_userPassword = ""
      this.in_userAccount = ""
      this.in_clazz = ''
      this.in_major = ''
      this.in_studentId = ''
      this.in_userId = ''
      this.in_job = ''
    },
    editUser (row) {
      this.title = "修改学生信息"
      this.clearInput()
      this.insertOrUpdate = false
      this.in_userId = row.userId
      this.in_userAccount = row.user.account
      this.in_userName = row.user.name
      this.in_userPassword = row.user.password
      this.in_userJob = row.user.job
      this.in_studentId = row.studentId
      this.in_clazz = row.clazz
      this.in_major = row.major
      this.centerDialogVisible = true
    },
    insert () {
      this.clearInput()
      this.centerDialogVisible = true
      this.insertOrUpdate = true
      this.title = "新增学生"
    },
    async insertUser () {
      var user = {
        userId: this.in_userId,
        account: this.in_userAccount,
        password: this.in_userPassword,
        name: this.in_userName,
        job: this.in_userJob
      }
      if (this.insertOrUpdate === true) {
        await this.$http.post("/stu", {
          user: user,
          major: this.in_major,
          clazz: this.in_clazz
        }, { headers: { 'userId': this.token } }).then((res) => {
          if (res.data.success === true) { this.$message("学生插入成功") }
          else { this.$message(res.data.errorMsg) }
        });
      }
      if (this.insertOrUpdate === false) {
        await this.$http.put("/stu", {
          user: user,
          studentId: this.in_studentId,
          major: this.in_major,
          clazz: this.in_clazz
        }, { headers: { 'userId': this.token } }).then((res) => {
          if (res.data.success === true) { this.$message("学生修改成功") }
          else { this.$message(res.data.errorMsg) }
        })
      }
      this.centerDialogVisible = false;
      this.load();
      this.loadClazz()
    },

    HandleSelectChange (val) {
      this.multipleSelection = val;
    },
    async multipleDelete () {
      var id = this.multipleSelection.map((v) => v.studentId);
      for (var i = 0; i < id.length; i++) {
        await this.$http.delete("/stu/" + id[i], { headers: { 'userId': this.token } }).then((res) => {
          if (!res.data.success) { this.$message(res.data.errorMsg) }
          else { this.$message("批量删除成功") }
        });
      }
      this.load();
      this.loadClazz()
    },
    async deleteUser (id) {
      await this.$http.delete("/stu/" + id, { headers: { 'userId': this.token } }).then((res) => {
        if (res.data.success === true) { this.$message("删除成功") }
        else { this.$message(res.data.errorMsg) }
      });
      this.load();
      this.loadClazz()
    },

    handleCurrentChange (page) {
      this.page = page;
      this.load();
    },
    async load () {
      var user = {
        account: this.to_account,
        name: this.to_name,
        job: this.to_job,
      }
      await this.$http.post("/stu/1", {
        user: user,
        major: this.to_major,
        clazz: this.to_clazz,
        page: this.page,
      }, { headers: { 'userId': this.token } })
        .then((res) => {
          if (!res.data.success) { this.$message(res.data.errorMsg) }
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    loadClazz () {
      this.$http.get("/stu/clazz", { headers: { 'userId': this.token } }).then((res) => {
        if (res.data.success === true) {
          this.clazzOption = res.data.data
        }
        else { this.$message(res.data.errorMsg) }
      })
    }
  },
  created () {
    this.loadClazz();
    this.load();
  },
};
</script>


<style scoped>
::v-deep .el-dialog {
  background-color: #525151;
  border: 1px solid darkorange;
}

::v-deep .el-dialog__title {
  color: darkorange;
  caret-color: transparent;
}

.input3 /deep/ .el-input__inner {
  margin-right: 5px;
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
}

.input /deep/ .el-input__inner {
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 100px;
}

.botton {
  color: darkorange;
  background-color: #525151;
  border-color: darkorange;
}

.botton:hover,
.botton:focus {
  background: rgb(255, 200, 133);
  border-color: darkorange;
  color: black;
}

.big {
  border: 1px solid darkorange;
}

::v-deep .el-table th {
  border: 1px solid darkorange !important;
  border-right: none !important;
  border-bottom: none !important;
  background-color: #525151;
}

::v-deep.el-table thead {
  color: darkorange;
  font-weight: 500;
  border: 1px solid darkorange;
}

::v-deep .el-table tr {
  background-color: #525151;
}

::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border: 1px solid darkorange;
  border-right: none !important;
}

::v-deep .el-table::before {
  border: 1px solid darkorange;
  height: 0;
}

::v-deep .el-table td,
.el-table th {
  text-align: center;
}

.el-input {
  width: 100px;
  margin-bottom: 20px;
}

.el-table {
  border: 1px solid darkorange;
  margin: 0 auto;
  font-size: 15px;
}
</style>